<script lang="ts" setup>
// 根据 tailcss 需要管理主题的变量配置
import { useThemeVars } from "naive-ui";

const themeVars = useThemeVars();
</script>

<template>
  <!--@formatter:off-->
  <component :is="`style`">
    :root { --color-primary: {{ themeVars.primaryColor }};
    --color-primary-hover: {{ themeVars.primaryColorHover }};
    --color-primary-pressed: {{ themeVars.primaryColorPressed }};
    --color-primary-suppl: {{ themeVars.primaryColorSuppl }}; --color-info:
    {{ themeVars.infoColor }}; --color-info-hover:
    {{ themeVars.infoColorHover }}; --color-info-pressed:
    {{ themeVars.infoColorPressed }}; --color-info-suppl:
    {{ themeVars.infoColorSuppl }}; --color-success:
    {{ themeVars.successColor }}; --color-success-hover:
    {{ themeVars.successColorHover }}; --color-success-pressed:
    {{ themeVars.successColorPressed }}; --color-success-suppl:
    {{ themeVars.successColorSuppl }}; --color-warning:
    {{ themeVars.warningColor }}; --color-warning-hover:
    {{ themeVars.warningColorHover }}; --color-warning-pressed:
    {{ themeVars.warningColorPressed }}; --color-warning-suppl:
    {{ themeVars.warningColorSuppl }}; --color-error:
    {{ themeVars.errorColor }}; --color-error-hover:
    {{ themeVars.errorColorHover }}; --color-error-pressed:
    {{ themeVars.errorColorPressed }}; --color-error-suppl:
    {{ themeVars.errorColorSuppl }}; }
  </component>
  <!--@formatter:on-->
</template>

<style></style>
